<template>
 <div>
    <van-grid  :column-num="columnNum" :border='false'>
      <van-grid-item  style="cursor:pointer" v-for="(value,index) in topData" :key="index" @click="click(value,index)" >
        <div class="menuItem">
          <img :src="taskicon[value.icon]" alt="" style="width:100%;height:100%;">
          <!-- <mobile-icon
            v-if="value.icon"
            slot="prefix"
            :icon-class="value.icon"
            class="el-input__icon"
            style="height: 32px; width: 32px"
          />
          <mobile-icon
            v-else
            slot="prefix"
            icon-class="tupian"
            class="el-input__icon"
            style="height: 32px; width: 32px"
          /> -->
        </div>
        <span class="name" :title="value.name">
          {{value.name}}
        </span>
      </van-grid-item>
    </van-grid>
 </div>
</template>
<script>
import store from "@/store";
export default {
  props: {
    columnNum:{
      type: Number,
      default: "",
    },
    topData:{
      type:Array,
      default:function(){
        return [];
      }
    }
  },
  data() {
    return {
      id:'',
      taskicon:{
        mypush:require('@/assets/images/ic_wofaqide.png'),
        mytodo:require('@/assets/images/ic_shujutongji.png'),
        mydone:require('@/assets/images/ic_yibanshiyi.png'),
        mycarbon:require('@/assets/images/ic_chaosongwode.png'),
      }
    };
  },
  mounted() {
   
  },
  watch: {
   
  },
  methods: {
    click(value,index){ 
      this.id = index
      if(this.$store.state.mobile.userAgent ==='mobile'){
        this.$router.push(value.jumpPath)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  .grid{
    cursor: pointer;
  }
  .van-grid {
    margin-top: 10px;
  }
  .checkColor{
    color: #1890FF !important;
  }
  .menuItem{
    width:50px;
    height:50px;
    border-radius: 50%;
  }
  .name {
    max-width: 60px;
    padding-top:5px;
    text-align: center;
    color:#000000;
    overflow-x:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // -webkit-line-clamp: 1;
    // -webkit-box-orient: vertical;
  }
</style>